﻿
Sail.widget.ext.newTabsComponent = Sail.extend(Sail.widget,{
    showTitle : true,
    border    : true,
    
    defaultIconcls : 'icon-tab',
    defaultHeight  : 100,
    
    moveTimer : null,
    moveStep  : 0,
    moveCount : 0,

    activeIndex : 0,
    
    //enableClose : true,                //是否可以关闭标志
    //createMode  : 'when-created',       //tab创建模式：当创建组件时创建/当点击时创建
    
    moveBarWidth : 32,
    activeZIndex : 100,
    
    //mutualMode   : true,
    
    //===================================================================================
    //方法 ： some func for init before create element
    //参数 ： 
    //返回 :  
    //说明 ： 
    //===================================================================================
    initComponent : function(){
        
        Sail.widget.ext.tabComponent.superclass.initComponent.call(this);

        //this.addEvents('tabclick');

        this.showTitle = true;              //showTitle 恒等于 true
        this.items     = this.items ||[];
        
        //-------------------------------------------------------------------------------
        this.title     = (this.title==undefined && this.titles!=undefined)?this.titles:this.title;
        this.title     = (typeof this.title =='string')?[this.title]:this.title;
        this.title     = this.title||[];
        this.showTitle = (this.title.length==0)?false:this.showTitle;
        this.count     = this.title.length;

        //-------------------------------------------------------------------------------
        this.createFlag= [];
        for(var i=0;i<this.count;i++){
            this.createFlag.push(false);    //各个tab 是否已创建标志
        }
        
        //-------------------------------------------------------------------------------
        this.repairCreateMode();            //各个tab 创建模式(create/click)
        this.repairEnableClose();           //各个tab 是否允许关闭
        this.repairIconCls();               //各个tab 图标样式
        
        this.initTitleWidth();
    },
    
    repairCreateMode  : function(){
        var len = this.count;
        
        if(typeof this.createMode =='string'){
            var backup = this.createMode;
            this.createMode = [];
            for(var i=0;i<len;i++){
                this.createMode.push(backup);
            }
        }else if(this.createMode instanceof Array){
            for(var i=0;i<len;i++){
                if(this.createMode[i]==undefined){
                    this.createMode[i]='when-created';
                }
            }
        }else{
            this.createMode = [];
            for(var i=0;i<len;i++){
                this.createMode.push('when-created');
            }
        }
    },
    
    repairEnableClose : function(){
        var len = this.count;
        
        if(typeof this.enableClose =='boolean'){
            var backup = this.enableClose;
            this.enableClose = [];
            for(var i=0;i<len;i++){
                this.enableClose.push(backup);
            }
        }else if(this.enableClose instanceof Array){
            for(var i=0;i<len;i++){
                if(this.enableClose[i]==undefined){
                    this.enableClose[i]=false;
                }
            }
        }else{
            this.enableClose = [];
            for(var i=0;i<len;i++){
                this.enableClose.push(false);
            }
        }
    },
    
    repairIconCls : function(){
        var len = this.count;
        
        if(typeof this.iconCls =='string'){
            var backup = this.iconCls;
            this.iconCls = [];
            for(var i=0;i<len;i++){
                this.iconCls.push(backup);
            }
        }else if(this.iconCls instanceof Array){
            for(var i=0;i<len;i++){
                if(this.iconCls[i]==undefined){
                    this.iconCls[i]= this.defaultIconcls;
                }
            }
        }else{
            this.iconCls = [];
            for(var i=0;i<len;i++){
                this.iconCls.push(this.defaultIconcls);
            }
        }
    },
    
    initTitleWidth : function(){
        this.standardTW = [];
        this.activeTW   = [];
        var w = 0,title="";
        for(var i=0,len=this.getCount();i<len;i++){
            title = this.title[i];
            w = Sail.getLabelWidth(title,"12px verdana");
            this.standardTW.push(w);
            w = Sail.getLabelWidth(title,"bold 12px verdana");
            this.activeTW.push(w);
        }
    },
    
    //===================================================================================
    //方法 ： some func for 
    //参数 ： 
    //返回 :  
    //说明 ： 
    //===================================================================================
    getCount : function(){
        return this.title.length;
        //return this.count;
    },
    
    getTabTotalWidth : function(){
        var allTitleWidth = this.standardTW.sum()+this.activeTW[this.activeIndex]-this.standardTW[this.activeIndex];
        return 2+allTitleWidth+72*this.getCount();
    },
    
    getTabWidthByIndex : function(index){
        var tw = (this.activeIndex==index)?this.activeTW[index]:this.standardTW[index];
        return (2+3+6+16+2+tw+40+3)||0;
    },
    
    getTabLeft : function(index){
        var left = 0;
        for(var i=0;i<index;i++){
            left+=this.getTabWidthByIndex(i);
        }
        return left;
    },
    getTabRight : function(index){
        return this.getTabLeft(index+1)+2;
    },

    getMoveBarWidth : function(){
        return this.moveBarWidth;
    },
    getMoveButtonLeft : function(){
        return this.width - 4- this.getMoveBarWidth();
    },

    
    //===================================================================================
    //方法 ： some func for change size 
    //参数 ： 
    //返回 :  
    //说明 ： 
    //===================================================================================
    setHeight : function(h){
        this.height = h;
        this.container.setHeight(h);

        var bodyHeight = this.getBodyHeight();
        this.body.setHeight(bodyHeight);

        for(var i=0;i<this.children.length;i++){
            var childer = this.children[i];
            childer.setHeight(bodyHeight-2);
            
            if(this.createFlag[i]==true){
                if(this.tabLayouts[i]!=undefined)
                    this.tabLayouts[i].reLayout({height:bodyHeight-2});
            }
        }
    },
 
    setWidth : function(w){
        this.width = w;
        this.container.setWidth(w);

        this.body.setWidth(this.width);
        this.div_splitBar.setWidth(this.width);
        this.reCreateTitleBar();

        for(var i=0;i<this.children.length;i++){
            var childer = this.children[i];
            childer.setWidth(this.width);
            
            if(this.createFlag[i]==true){
                if(this.tabLayouts[i]!=undefined)
                    this.tabLayouts[i].reLayout({width:this.width});
            }
        }
    },
    
    setSize : function(w,h){
        this.width  = w;
        this.height = h;
        this.container.setWidth(w);
        this.container.setHeight(h);

        var bodyHeight = this.getBodyHeight();
        this.body.setHeight(bodyHeight);

        this.body.setWidth(this.width);
        this.div_splitBar.setWidth(this.width);
        this.reCreateTitleBar();

        for(var i=0;i<this.children.length;i++){
            var childer = this.children[i];
            childer.setWidth(this.width);
            childer.setHeight(bodyHeight-2);
            
            if(this.createFlag[i]==true){
                if(this.tabLayouts[i]!=undefined){
                    this.tabLayouts[i].reLayout({width:this.width,height:bodyHeight-2});
                }
            }
        }
        
    },
    
    refreshBody : function(){
    },
    
    //===================================================================================
    //方法 ： some func for move bar button  
    //参数 ： 
    //返回 :  
    //说明 ： 
    //===================================================================================
    tabsScroll2 : function(step,mode){
        mode = (mode==undefined)?'increase':mode;
        this.div_title.scroll2('h',step,mode);
    },
    
    btMove2Left_over : function(){},
    btMove2Left_out : function(){},
    btMove2Left_disable : function(){
        if(!this.btMove2Left.hasClass('icon-tabs-m2-left-disabled'))
            this.btMove2Left.addClass('icon-tabs-m2-left-disabled');
    },
    btMove2Left_enable : function(){
        if(this.btMove2Left.hasClass('icon-tabs-m2-left-disabled'))
            this.btMove2Left.removeClass('icon-tabs-m2-left-disabled');
    },
    btMove2Left_click : function(){
        //debugger;
        var theobj = this;
        this.moveStep = 0;
        theobj.moveCount=0;
        
        this.moveTimer = setInterval(function(){
            theobj.moveCount++;
            theobj.tabsScroll2(theobj.moveStep);
            if(theobj.div_title.el.scrollLeft==0){
                theobj.btMove2Left_disable();
                theobj.stopTimer();
            }

            theobj.btMove2Right_enable();
            
            if(theobj.moveCount<10){
                theobj.moveStep+=-1;
            }else{
                theobj.moveStep+=-2;
                theobj.moveStep = (theobj.moveStep>0)?0:theobj.moveStep;
            }
            
            if(theobj.moveCount>20){
                theobj.stopTimer();
            }
        },10);
    },


    btMove2Right_over : function(){},
    btMove2Right_out : function(){},
    btMove2Right_disable : function(){
        if(!this.btMove2Right.hasClass('icon-tabs-m2-right-disabled'))
            this.btMove2Right.addClass('icon-tabs-m2-right-disabled');
    },
    btMove2Right_enable : function(){
        if(this.btMove2Right.hasClass('icon-tabs-m2-right-disabled'))
            this.btMove2Right.removeClass('icon-tabs-m2-right-disabled');
    },
    btMove2Right_click : function(){
      
        var theobj = this;
        this.moveStep = 0;
        theobj.moveCount=0;
        
        this.moveTimer = setInterval(function(){
            theobj.moveCount++;
            theobj.tabsScroll2(theobj.moveStep);
            if(theobj.div_title.el.scrollLeft>=theobj.moveLimit){
                theobj.btMove2Right_disable();
                theobj.stopTimer();
            }
            
            theobj.btMove2Left_enable();
            
            if(theobj.moveCount<10){
                theobj.moveStep+=1;
            }else{
                theobj.moveStep+=2;
                theobj.moveStep = (theobj.moveStep<0)?0:theobj.moveStep;
            }
            
            if(theobj.moveCount>20){
                theobj.stopTimer();
            }
        },10);
    },
    
    stopTimer:function(){
        this.moveCount=0;
        this.moveStep = 0;
        clearInterval(this.moveTimer);
    },
    
    //===================================================================================
    //方法 ： some func for reset tabs when click 
    //参数 ： 
    //返回 :  
    //说明 ： 
    //===================================================================================
    getTabHTML : function(config){
        if(this.tp_td == undefined){
            this.tp_td = new Sail.Template(
                "<td id={tdid} width={tdWidth}>",
                    "<table cellspacing=0 cellpadding=0 border=0 style='cursor:hand;table-layout:fixed'>",
                        "<tr height=23>",
                            "<td class='tc-tab-leftspac' width=2></td>",         //标签左空白间隔
                            "<td class='{leftBorder}' width=3></td>",            //左边框
                            "<td class='{commentCls}' width=6></td>",            //图标左留白
                            "<td class='{commentCls}' width=16>",                //图标
                                "<div class='{iconCls}' style='width:16;height:16'></div>",
                            "</td>",
                            "<td class='{commentCls}' width=2></td>",            //图标文本间隔
                            "<td class='{commentCls}' height=23 width={titleW} style='padding-top:2px'>{title}</td>", //标签文本
                            "<td class='{commentCls}' width=40 align=right>",
                                //"<div class='icon-tabs-close' style='width:13;'></div>",
                            "</td>",           //右留白
                            "<td class='{rightBorder}' width=3></td>",            //右边框
                        "</tr>",
                    "</table>",
                "</td>"
            );
        }
        
        return this.tp_td.apply({
            leftBorder  : (config.activeIndex)?"tc-tab-leftborder-active" :"tc-tab-leftborder",
            rightBorder : (config.activeIndex)?"tc-tab-rightborder-active":"tc-tab-rightborder",
            commentCls  : (config.activeIndex)?"tc-tab-centen-active":"tc-tab-centen",
            iconCls     : (config.activeIndex)?"tc-tab-icon":"tc-tab-icon-dis",
            
            tdid        : config.id,
            titleW      : config.titleWidth,
            tdWidth     : config.tdWidth,
            title       : config.title
        });
        
    },

    getTitleBarHTML : function(config){              //创建一个tabs标签tab的HTML代码
        this.tp_table = new Sail.Template(
            '<table style="cursor:hand;table-layout:fixed" height=23 cellspacing=0 >',
                '<tr height=23>',
                '<td class="tc-tab-leftspac" width=2></td>',
                '{td}</tr>',
            '</table>'
        );


        if(typeof config.title =='string'){
            config.title = [config.title];
        }
        config.activeIndex = config.activeIndex ||0;
        
        var tds = [];
        var td  = "";
        for(var i=0,len=config.title.length;i<len;i++){
            var w = Sail.getLabelWidth(config.title[i],((i==config.activeIndex)?"bold 12px verdana":"12px verdana"));
            
            td = this.getTabHTML({
                id          : config.idprefix+"-"+i,
                activeIndex : (i==config.activeIndex)?true:false,
                titleWidth  : w,
                tdWidth     : this.getTabWidthByIndex(i),
                title       : config.title[i]
            });

            tds.push(td);
        }
        
        var table = this.tp_table.apply({
            td:tds.join("")
        });
        
        return table;
    },
    
    bindEvent2Tab  : function(){
        this.titleTD = [];
        for(var i=0;i<this.getCount();i++){
            var tdid = this.div_title.getID()+"-"+i;
            var td = Ext.get(tdid);
            this.titleTD.push(td.dom);
            td.on('click',this.onTabClick,this);
        }
    },
    
    onTabClick : function(e,target){
        var clickTD = arguments[0].target.parentElement.parentElement.parentElement.parentElement;
        clickTD     = (arguments[0].target.tagName=='DIV')?clickTD.parentElement:clickTD;
        var index   = parseInt(clickTD.id.split('-')[1],10);
        
//        if(target.className=='icon-tabs-close'){
//            this.onTabClose(index);
//            return;
//        }

        if(index==this.activeIndex) return;
        if(!isNaN(index)){
            this.setActiveTab(index);
        }
        
        //this.fireEvent('tabclick',this,e);
    },

    //on2 : function(eventName, handler, scope, options){
    //    debugger;
    //    this.on(eventName, handler, scope, options);
    //},

    
    onTabClose : function(closeIndex){
//        if(this.title.length==1) return;
//        
//        this.title.splice(closeIndex,1);
//
//        var html = this.getTitleBarHTML({
//            title:this.title,activeIndex:this.activeIndex,idprefix : this.div_title.getID(),
//            iconcls : (this.iconcls==undefined)?this.defaultIconcls:this.iconcls
//        })
//        this.div_title_son.setHTML(html);
//        this.bindEvent2Tab();   
//
//        if(this.needMoveBar()){
//            this.moveLimit = this.div_title.el.scrollWidth - this.div_title.el.offsetWidth;
//        }             
    },
    

    //===================================================================================
    //方法 ： some func for setActiveTab 
    //参数 ： 
    //返回 :  
    //说明 ： 
    //===================================================================================
    setActiveTab : function(index){
        this.resetTabsTitle(index);
        this.activedChilder(index);
    },

    resetTabsTitle : function(newActiveIndex){
        //debugger;
        var oldActiveIndex = this.activeIndex;      //保存旧的当前索引
        this.activeIndex   = newActiveIndex;        //设置新的当前索引
        
        var oldTDID = this.div_title.getID()+"-"+oldActiveIndex;
        var newTDID = this.div_title.getID()+"-"+newActiveIndex;
        this.setTabClass(oldTDID,oldActiveIndex,false);
        this.setTabClass(newTDID,newActiveIndex,true);

        this.moveLimit = this.div_title.el.scrollWidth - this.div_title.el.offsetWidth;
        
        if(this.btMove2Left==undefined) return;
        
        //-------------------------------------------------------------------------------
        //-------------------------------------------------------------------------------
        var left = this.getTabLeft(newActiveIndex);
        if(left<this.div_title.el.scrollLeft){
            this.tabsScroll2(-this.div_title.el.scrollLeft+left+((newActiveIndex==0)?0:2));
            this.btMove2Right_enable();
            
            if(this.div_title.el.scrollLeft==0){
                this.btMove2Left_disable();
            }
        }

        //-------------------------------------------------------------------------------
        //-------------------------------------------------------------------------------
        var right = this.getTabRight(newActiveIndex);
        if(right>(this.div_title.el.offsetWidth+this.div_title.el.scrollLeft)){
            this.tabsScroll2(right-this.div_title.el.offsetWidth,'');
            this.btMove2Left_enable();

            if(this.div_title.el.scrollLeft>=this.moveLimit){
                this.btMove2Right_disable();
            }
            
        }else{
            this.btMove2Right_enable();
        }
    },
    
    setTabClass : function(tabid,index,isActive){

        var TD = document.getElementById(tabid);
        var TR = TD.children[0].rows[0];
        
        TR.cells[1].className=(isActive)?"tc-tab-leftborder-active" :"tc-tab-leftborder"
        for(var i=2;i<7;i++){
            TR.cells[i].className = (isActive)?"tc-tab-centen-active":"tc-tab-centen";
        }
        TR.cells[7].className=(isActive)?"tc-tab-rightborder-active" :"tc-tab-rightborder"

        TR.cells[3].children[0].className=(isActive)?"tc-tab-icon" :"tc-tab-icon-dis"

        var w = Sail.getLabelWidth(this.title[index],(isActive)?"bold 12px verdana":"12px verdana");
        TR.cells[5].width = w;
        
        TD.width = this.getTabWidthByIndex(index);
    },

    activedChilder : function(tabIndex,mode){
        if(this.mutualMode===true && mode!==true) return;
        
        this.activeZIndex++;
        this.children[tabIndex].el.style.zIndex=this.activeZIndex;
        
        if(this.createFlag[tabIndex]==false){
            this.doLayoutByIndex(tabIndex);
        }
    },

    //===================================================================================
    //方法 ： some func for bars 
    //参数 ： 
    //返回 :  
    //说明 ： 
    //===================================================================================
    reCreateTitleBar : function(){
        var needFlag = this.reCreateMoveBar();
        
        var mbWidth  = (needFlag)?this.getMoveBarWidth():0;
        var width    = this.width - ((mbWidth==0)?0:mbWidth+18);
        
        this.div_title.setWidth(width);        
        this.div_title.addClass((mbWidth==0)?'tc-tb':'tc-tb-needMove-right');

        if(needFlag){
            this.moveLimit = this.div_title.el.children[0].offsetWidth - this.div_title.el.offsetWidth;
        }
    },
    
    createTitleBar : function(){          //创建标题栏
        
        //-------------------------------------------------------------------------------
        //如果需要，创建移动tab的左右按钮栏
        //-------------------------------------------------------------------------------
        var mbWidth = (this.needMoveBar())?this.createMoveBar():0;
        
        //-------------------------------------------------------------------------------
        //创建标题栏容器
        //-------------------------------------------------------------------------------
        this.titleBarHeight = (this.titleBarHeight==undefined)?23:this.titleBarHeight;
        
        var width = this.width - ((mbWidth==0)?0:mbWidth+18);
        
        this.div_title = new Sail.DIV({
            left  : 0,
            top   : 0,
            width : width,
            height: this.titleBarHeight,
            zIndex: 10,
            border: "0px #ff0000 solid",

            parent: this.getOCD()
        });
        this.div_title.addClass((mbWidth==0)?'tc-tb':'tc-tb-needMove-right');
        
        //-------------------------------------------------------------------------------
        //-------------------------------------------------------------------------------
        this.div_title_son = new Sail.DIV({
            left  : 0,
            top   : 0,
            parent: this.div_title,
            //border: "1px #ff0000 solid",
            zIndex : 10
        });
    
        var html = this.getTitleBarHTML({
            title:this.title,activeIndex:this.activeIndex,idprefix : this.div_title.getID(),
            iconcls : (this.iconcls==undefined)?this.defaultIconcls:this.iconcls
        })

        this.div_title_son.setHTML(html);
        this.bindEvent2Tab();
        
        //-------------------------------------------------------------------------------
        //-------------------------------------------------------------------------------
        if(this.needMoveBar()){
            this.moveLimit = this.div_title.el.scrollWidth - this.div_title.el.offsetWidth;
          
        }
            
        return this.titleBarHeight;
    },

    createSplitBar : function(top){          //创建一个分隔栏
        this.splitBarHeight = 4;
        this.div_splitBar = new Sail.DIV({
            width :'100%',
            left  :0,
            top   :top-1,
            parent: this.getOCD(),
            border:'#8DB2E3 1px solid',
            zIndex:9
        });
        this.div_splitBar.addClass('form_bar');        
        return this.splitBarHeight;
    },

    getIndexByTitle : function(title){
        var len = this.getCount();
        for(var i=0;i<len;i++){
            if(this.title[i]==title) return i;
        }
        return -1;
    },

            
    changeTitle : function(oldTitle,newTitle){
        
        //-------------------------------------------------------------------------------
        //根据旧标题文本获得其在tabs中的索引
        //-------------------------------------------------------------------------------
        var index = (typeof oldTitle =='string')?this.getIndexByTitle(oldTitle):oldTitle;
        if(index==-1) return false;
        
        //-------------------------------------------------------------------------------
        //根据索引，修改 全局记录
        //-------------------------------------------------------------------------------
        this.standardTW[index]= Sail.getLabelWidth(newTitle,"12px verdana");;
        this.activeTW[index]  = Sail.getLabelWidth(newTitle,"bold 12px verdana");
        this.title[index] = newTitle;
        
        //-------------------------------------------------------------------------------
        //根据索引，修改标题文本显示
        //-------------------------------------------------------------------------------
        var cells = this.div_title_son.el.children[0].rows[0].cells;
        var titleTD = cells[1].children[0].rows[0].cells[5];
        titleTD.innerText = newTitle;

        var TDID = this.div_title.getID()+"-"+index;
        this.setTabClass(TDID,index,(this.activeIndex==index)?true:false);

        //-------------------------------------------------------------------------------
        //判断修改后是否需要 moveBar 如果需要，创建moveBar
        //-------------------------------------------------------------------------------
        //this.resetTabsTitle(index);
        this.reCreateTitleBar();
        //code mark 20090916223400

    },
    
    //===================================================================================
    //方法 ： some func for add or del tab
    //参数 ： 
    //返回 :  
    //说明 ： 
    //===================================================================================
    add : function(){
        //debugger;
    },
    
    //===================================================================================
    //方法 ： some func for move button bar 
    //参数 ： 
    //返回 :  
    //说明 ： 
    //===================================================================================
    needMoveBar       : function(){
        var tw = this.getTabTotalWidth()+20;
        return (tw>(this.width))?true:false;
    },
    
    hideMoveBar       : function(){
        if(this.btMove2Left!=undefined){
            this.btMove2Left.hide();
            this.btMove2Right.hide();
        }
    },
    showMoveBar       : function(){
        if(this.btMove2Left!=undefined){
            this.btMove2Left.show();
            this.btMove2Right.show();
        }
    },
    
    reCreateMoveBar   : function(){
        
        //-------------------------------------------------------------------------------
        if(this.haveMoveBar!==true){    //未创建
            if(this.needMoveBar()){     //需要创建
                this.createMoveBar();   //创建
                return true;
            }
            return false;
        }
        
        //-------------------------------------------------------------------------------
        if(this.needMoveBar()){
            this.showMoveBar();
            var left = this.getMoveButtonLeft();

            this.btMove2Left.setLeft(left);
            this.btMove2Right.setLeft(left+16);
            
            return true;
        }else{
            this.hideMoveBar();
            return false;
        }
    },
    createMoveBar     : function(){
        
        //-------------------------------------------------------------------------------
        //-------------------------------------------------------------------------------
        var left = this.getMoveButtonLeft();        //获得起始左位置
        this.btMove2Left = new Sail.DIV({           //左移按钮
            left  : left,
            top   : 3,
            width : 15,
            border : "0px #00ff00 solid",
            height: 15,
            parent: this.getOCD(),
            zIndex: 10
        });
        this.btMove2Left.addClass('icon-tabs-m2-left');
        this.btMove2Left.addClass('icon-tabs-m2-left-disabled');
        
        var leftEl = Ext.get(this.btMove2Left.el);
        leftEl.on('mouseover',this.btMove2Left_over,this);
        leftEl.on('mouseout',this.btMove2Left_out,this);
        leftEl.on('click',this.btMove2Left_click,this);

        //-------------------------------------------------------------------------------
        //-------------------------------------------------------------------------------
        this.btMove2Right = new Sail.DIV({          //右移按钮
            left  : left+16,
            top   : 3,
            width : 15,
            border : "0px #00ff00 solid",
            height: 15,
            parent: this.getOCD(),
            zIndex: 10
        });
        this.btMove2Right.addClass('icon-tabs-m2-right');

        var rightEl = Ext.get(this.btMove2Right.el);
        rightEl.on('mouseover',this.btMove2Right_over,this);
        rightEl.on('mouseout',this.btMove2Right_out,this);
        rightEl.on('click',this.btMove2Right_click,this);

        this.haveMoveBar = true;
        
        return this.moveBarWidth;
    },
    
    
    //===================================================================================
    //方法 ： some func for createBody and children 
    //参数 ： 
    //返回 :  
    //说明 ： 
    //===================================================================================
    getBodyHeight : function(){
        return this.height-((this.showTitle==true)?26:0)
    },
    
    createBody : function(config){              //创建body
        var bodyHeight = this.getBodyHeight();
        
        var bodyConfig = {
            left  : 0,
            top   : config.top-1||0,
            width : '100%',
            height: bodyHeight+1,
            parent: this.getOCD(),
            zIndex: 11
        };
        bodyConfig.style={};
        
        if(this.border===true){
            bodyConfig.border = '#99BBE8 1px solid';
            bodyConfig.style.border = '#99BBE8 1px solid';
        }
        if(typeof this.border =='string'){
            bodyConfig.border = this.border;
        }
        
        bodyConfig.style.overflow='hidden';
        this.body = new Sail.DIV(bodyConfig);
        
        //this.body.el.style.overflow='hidden';
        this.createChildren();
        //debugger;
        return this.body.getEl();
    },

    createChildren : function(){
        
        this.children=[];
        var bodyHeight = this.getBodyHeight();

        for(var i=0;i<this.title.length;i++){
            var childerConfig ={
                left  : 0,
                top   : 0,
                width : '100%',
                height: bodyHeight-1,
                parent: this.body,
                border:'#ff0000 0px solid',
                zIndex: 10
            };
            var td = new Sail.DIV(childerConfig);
            td.el.style.backgroundColor = "#ffffff";
            td.el.style.overflow = 'auto';
            //td.setHTML("-"+(i+1));
            this.children.push(td);
        }
    },
    
    //===================================================================================
    //方法 ：  some func for children layout create
    //参数 ： 
    //返回 :  
    //说明 ： 
    //===================================================================================
    afterCreateWidget : function(){
        this.tabLayouts = [];
        
        for(var i=0;i<this.title.length;i++){
            var tabConfiger = this.items[i];
            
            if(tabConfiger==undefined || tabConfiger.items == undefined) {
                this.tabLayouts.push(null);
            }else{
                var layout = new Sail.layoutConstructor({
                    executor     : this.executor,
                    items        : tabConfiger.items,
                    layoutConfig : tabConfiger.layoutConfig,
                    layout       : tabConfiger.layout,
                    parentDiv    : this.children[i],
                    ownerFrame   : this.ownerFrame,
                    ownerGroup   : this.ownerFrame.getChildren(),
                    page         : this.ownerFrame.getBelongedPage(),
                    widgetPrefix : this.ownerFrame.widgetPrefix,
                    height       : this.getBodyHeight(),
                    width        : this.body.getOffset().width,
                    constructTo  : this
                });
                
                this.tabLayouts.push(layout);
            }
            if(i==this.activeIndex){
                this.activedChilder(i,true);
                continue;
            }
            
            if(this.createMode[i]=="when-created"){
                this.doLayoutByIndex(i);
            }
        } 

    },
    
    doLayoutByIndex : function(tabIndex){
        
        if(this.tabLayouts[tabIndex]!=null){


            this.tabLayouts[tabIndex].height = this.getBodyHeight();
            this.tabLayouts[tabIndex].width  = this.body.getOffset().width;

        
            //this.loadMask = new Ext.LoadMask(Ext.get(this.children[tabIndex].el),{msgCls:'x-mask-saveing',msg:"create...."});
            //this.loadMask.show();
            
            this.tabLayouts[tabIndex].doLayout(this.level);
            this.createFlag[tabIndex] = true;
            
            //this.loadMask.hide();
        }
    },
    
    //===================================================================================
    //方法 ：  createWidgetElement
    //参数 ： 
    //返回 :  
    //说明 ： 
    //===================================================================================
    createWidgetElement:function(){
        //debugger;
        var date1 = new Date();

        //-------------------------------------------------------------------------------
        if(this.showTitle===true){
            var h_titleBar = this.createTitleBar();
            var h_splitBar = this.createSplitBar(h_titleBar);     
        }
        
        //-------------------------------------------------------------------------------
        var _top = h_titleBar+h_splitBar;
        this.createBody({top:_top-1});

        var date2 = new Date();

    },
    
    lastFunc : function(){
    }    
});


Sail.widget.ext.newTabs = Sail.widget.ext.newTabsComponent;
